<script setup>
import {toRef} from "@vue/reactivity";
import {defineEmits, defineProps} from "@vue/runtime-core";

const props = defineProps({
  dialogVisible:{
    type:Boolean,
    required:true,
    default:false
  },
  addData:{
    name:'',
    age:'',
    sex:'',
    address:'',
    phone:'',
    email:''
  },
})
const emit = defineEmits(['addUser','close'])
const visible = ref(props.dialogVisible);
watch(() => props.dialogVisible, (newVal) => {
  visible.value = newVal;
});
</script>

<template>
  <el-dialog  :model-value="visible" :close-on-click-modal = "false">
    <template #header>
      <slot name="title">弹窗标题</slot>
    </template>
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="addData.name" placeholder="请输入姓名" >

        </el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="addData.age" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="addData.sex" placeholder="请输入性别"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="addData.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="addData.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="addData.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('addUser')">确定</el-button>
        <el-button @click="$emit('close')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>
